@charset "utf-8";
@import "common/reset";
@import "common/common";

.title{
    h3{
        text-transform: uppercase;
    }
    .line{
        margin:27px auto;
    }
}
.banner{
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    img{
        position: absolute;
        top: 0;
        left: -999px;
        right: -999px;
        margin: auto;
    }
}
.brand_case{
    padding-top: 90px;
    padding-bottom: 141px;
    border-bottom: 1px solid #b5b5b5;
    .title{
        margin-bottom: 52px;
    }
    .bc-content{
        width: 100%;
        display: none;
        li{
            width: 20%;
            height: bs(400px);
            float: left;
            position:relative;
            overflow: hidden;
            a,.imgfix{
                width: 100%;
                height: 100%;
            }
            .imgfix{
                z-index: 1;
                transition: 300ms all;
                transform-origin: center center;
            }
            .mask{
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                background: rgba(30,77,149,.9);
                position: absolute;
                opacity: 0;
                top: 0;
                left: 0;
                z-index: 5;
                transition: 300ms all;
                .tag{
                    margin: 20px 0 0 10px;
                }
                .imgfix{
                    max-width: 236px;
                    max-height: 85px;
                    margin: 0 auto;
                    img{
                        width: 100%;
                        transform: scale(.7);
                    }
                }
                .arrow{
                    box-sizing: border-box;
                    width: 40px;
                    height: 40px;
                    line-height: 38px;
                    position: relative;
                    border-radius: 50%;
                    margin: 0 auto;
                    border: 1px solid white;
                    text-align: center;
                    margin-top: 20px;
                    img{
                        height: 20px;
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                    }
                }
            }
        }
        li:hover{
            a>.imgfix{
                transform: scale(1.2);
            }
           .mask{
               opacity: 1;
           }
        }
    }
    .bc-content.act{
        display: block;
    }
    .check-more{
        margin-top: 93px;
    }
}
